@tailwind base;
@tailwind components;
@tailwind utilities;

/* 注意路径 最后的输出是在css文件里面的 */
@font-face {
   font-family: Alata;
   src: url('../fonts/Alata/Alata-Regular.ttf') format('truetype');
}
@font-face {
   font-family: JosefinSans;
   src: url('../fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf')
      format('truetype');
}

#hero {
   background-image: url('../images/desktop/image-hero.jpg');
   background-repeat: no-repeat;
   background-size: cover;
}

@media (max-width: 576px) {
   #hero {
      background-image: url('../images/desktop/image-hero.jpg');
      background-position: center;
   }
}

@layer components {
   .btn {
      @apply tracking-widest border text-black border-black  px-6  hover:bg-black hover:text-white uppercase font-alata font-light;
   }
}

.item-container {
   @apply font-light text-2xl text-slate-50 uppercase flex flex-col space-y-4 items-center md:grid md:grid-cols-4 md:mx-0 md:gap-4;
}
.item {
   @apply relative cursor-pointer overflow-hidden;
}
.item-gradiant {
   @apply absolute top-0 bottom-0 right-0 left-0 bg-gradient-to-t from-transparent to-gray-900 group-hover:from-gray-50 group-hover:to-white group-hover:opacity-70;
}
@layer base {
   h5 {
      @apply w-52 absolute px-6 bottom-2 duration-200 group-hover:scale-110 group-hover:text-black;
   }
}


.hamburger{
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: all 0.25s;
    position: relative;
}
.hamburger-top,.hamburger-middle,.hamburger-bottom{
    position: absolute;
    width: 24px;
    height: 2px;
    top: 0;
    left: 0;
    background-color: #fff;
    transform: rotate(0);
    transition: all 0.5s;
}
.hamburger-middle{
    transform: translateY(7px);
}
.hamburger-bottom{
    transform: translateY(14px);
}

.open{
    transform: rotate(90deg);
}

.open .hamburger-top{
    transform: rotate(45deg) translateY(6px) translateX(6px);
}

.open .hamburger-bottom{
    transform: rotate(-45deg) translateY(6px) translateX(-6px);
}

.open .hamburger-middle{
   display: none;
}